<!--增加业务员-->
<template>
  <div style="padding: 20px">
    <div class="title_font">
      增加业务员
    </div>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >


    <el-form-item label="选择用户：" prop="userId">
      <div class="selectUser">
        <el-input v-model="formData.names" readonly placeholder="选择用户" />
        <el-button type="primary" @click="selectUserFun">选择用户</el-button>
      </div>
      
      <!-- <el-select v-model="formData.userId" placeholder="选择用户">
        <el-option
            v-for="item in selectUserlist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> -->
    </el-form-item>


      <el-form-item label="业务员标签"  prop="customLabel">
        <el-select v-model="formData.customLabelArr" multiple clearable placeholder="请选择标签">
          <el-option
            v-for="item in labelTypeList"
            :key="item.labelName"
            :label="item.labelName"
            :value="item.labelName"
          />
        </el-select>

      </el-form-item>

    <el-form-item label="账户状态：" prop="status">
      <el-select
        v-model="formData.status"
        placeholder="账户状态"
        clearable
        class="!w-240px"
      >
        <el-option
          v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>

<!--    <el-form-item label="首页推荐：" prop="isHome">-->
<!--      <el-radio-group v-model="formData.isHome" class="rodio_style ml-4">-->
<!--        <el-radio label="0" size="small">关闭</el-radio>-->
<!--        <el-radio label="1" size="small">开启</el-radio>-->
<!--      </el-radio-group>-->
<!--    </el-form-item>-->


    <el-form-item label="登录账号：" prop="username">
      <el-input v-model="formData.username" placeholder="请输入"
                onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                style="width: 200px;height: 30px" />
    </el-form-item>


    <el-form-item label="登陆密码：" prop="password">
      <el-input v-model="formData.password"  placeholder="请输入" style="width: 200px;height: 30px" />
    </el-form-item>


      <el-form-item label="身份证号：" prop="identityCard">
        <el-input

          v-model="formData.identityCard"
          :rows="2"
          style="width: 400px"
          maxlength="18"
          placeholder="请输入身份证号"
        />
      </el-form-item>

      <el-form-item label="业务员介绍：" prop="remark">
        <el-input

          v-model="formData.remark"
          :rows="2"
          style="width: 400px"
          type="textarea"
          placeholder="输入业务员介绍"
        />
      </el-form-item>

    </el-form>

    <div class="button_style">
      <button class="add_button" @click="submitForm">添 加</button>
    </div>

    <el-dialog
      v-model="selectUser"
      title="选择用户"
      width="45%"
      center
      :before-close="handleClose"
    >
    <div>
      <el-input v-model="userMobile" type="number" maxlength="11" style="width: 200px" placeholder="输入手机号" />
      <el-input v-model="userName" style="width: 100px;margin: 0 10px;" placeholder="输入姓名" />
      <el-button type="success" @click="screen">搜索</el-button>
      <el-button type="info" @click="reSet">重置</el-button>
    </div>
    <div class="userList">
      <el-table :data="screenList" stripe style="width: 100%">
        <el-table-column prop="nickname" label="用户" width="170" />
        <el-table-column prop="name" label="姓名" width="170" />
        <el-table-column prop="mobile" label="手机号" width="170" />
        <el-table-column prop="mobile" label="操作" width="170">
          <template #default="scope">
            <el-button type="primary" @click="selectMan(scope.row.id,scope.row.name,scope.row.nickname)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesChange">
        <Pagination
        :total="total"
        v-model:page="pages"
        v-model:limit="pageSize"
        @pagination="selectUserFun"
      />
    </div>
    </el-dialog>
  </div>
  <!--  <el-dialog-->
  <!--      title="提示"-->
  <!--      v-model="dialogVisible"-->
  <!--      width="30%"-->
  <!--      :before-close="handleClose">-->
  <!--    <div style="margin: 30px;font-size: 20px;margin-top: -10px">确认添加</div>-->
  <!--    <span slot="footer" class="dialog-footer">-->
  <!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
  <!--    <el-button type="primary" @click="AddReminder();dialogVisible = false;">确 定</el-button>-->
  <!--  </span>-->
  <!--  </el-dialog>-->
</template>

<script lang="ts" setup>
import { ref } from "vue";
import * as PublicInterface from "@/api/guardPage/publicInterface";
import { getUserPages } from "@/api/hutai/salesman";
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as LabelTableApi from "@/api/hutai/labelTable";
const dialogVisible = ref(false);
const selectUser = ref(false);
const loading = ref(true); // 列表的加载中
const message = useMessage() // 消息弹窗
const formRef = ref() // 表单 Ref
const userMobile = ref('')
const userName = ref('')
const total = ref(0) // 列表的总页数
const labelTypeList = ref([]) // 类型列表
const options = [
  {
    value: '1',
    label: '信贷',
  },
  {
    value: '2',
    label: '抵押转贷',
  },
  {
    value: '3',
    label: '抵押贷',
  }
]

const formData = ref({
  names:null,
  userId: null,
  userType: null,
  status: 0,
  identityCard: null,
  username: null,
  customLabel: null,
  customLabelArr: null,
  remark: null,
  password: null,
  openId: null,
  isHome: null
});

const formRules = reactive({
  userId: [{ required: true, message: '用户不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '帐号状态（0正常 1停用）不能为空', trigger: 'blur' }],
  username: [{ required: true, message: '登录名不能为空', trigger: 'blur' }, { min: 4, message: '登录名至少输入4个字符', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  identityCard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }],
  customLabelArr: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
})


const getLabelList = async () => {
  labelTypeList.value = await LabelTableApi.getLabelTableList()
}

//调用增加业务员接口

const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求

  var arr = formData.value.customLabelArr;
  var str1 = "";
  for (let i = 0; i < arr.length; i++) {
    if (i < arr.length - 1) {
      str1 += arr[i] + ",";
    } else {
      str1 += arr[i];
    }
  }

  try {
    const data = formData.value
    data.customLabel = str1
    data.userType = 2
    await PublicInterface.addUsers(data)
    message.success('添加成功')
    //重置表单
    resetForm()
  } finally {

  }
}

let pages = ref('1')
let pageSize = ref('10')

//筛选
const screen = async() => {
  let list = await getUserPages(pages.value,10,1,userName.value,userMobile.value)
  screenList.value = list.list
}
//重置
const reSet = async() => {
  userMobile.value = ''
  userName.value = ''
  let list = await getUserPages(pages.value,10,1,userName.value,userMobile.value)
  screenList.value = list.list
}

//获取用户列表
const screenList = ref ([])
const selectUserFun = async() => {
  selectUser.value = true
  let list = await getUserPages(pages.value,10,1,userName.value,userMobile.value)
  total.value = list.total
  screenList.value = list.list
}

//选择
const selectMan = (id,name,nickName) => {
  selectUser.value = false
  formData.value.userId = id
  if (name==undefined || name==null || name==''){
    formData.value.names = nickName
  }else {
    formData.value.names = name
  }

}

onMounted(() => {
  getLabelList()
});


/** 重置表单 */
const resetForm = () => {

  formData.value = {
    userId: null,
    userType: null,
    status: null,
    username: null,
    customLabel: null,
    customLabelArr: null,
    remark: null,
    password: null,
    openId: null,
    isHome: null
  }
  formRef.value?.resetFields()
}

</script>
<style lang="scss">
.button_style {
  margin-top: 20px;

  .add_button {
    width: 100px;
    height: 30px;
    font-weight: 500;
    color: white;
    background-color: #165dff;
    border: 0;
    border-radius: 3px;
  }

  .chance_button {
    width: 100px;
    height: 30px;
    margin-left: 20px;
    font-weight: 500;
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
  }
}

.rodio_style {
  margin-top: 5px;
}

.div_style {
  margin-top: 10px;
}

.item_font {
  float: left;
  width: 80px;
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}

.title_font {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.selectUser{
  display: flex;
  align-items: center;
}

.userList{
height: 500px;
overflow: auto;
}

.pagesChange{
  padding: 20px;
}
</style>
